<template>
  <n-card :bordered="false" class="proCard">
    <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
      <template #statusSlot="{ model, field }">
        <n-input v-model:value="model[field]" />
      </template>
    </BasicForm>

    <BasicTable
      :columns="tableColumns"
      :request="loadDataTable"
      :row-key="(row:ListData) => row.id"
      ref="actionRef"
      :actionColumn="actionColumn"
      @update:checked-row-keys="onCheckedRow"
      :scroll-x="1090"
    />
  </n-card>
  <n-modal v-model:show="showModal">
    <n-card
      style="width: 600px"
      title="商品信息"
      :bordered="false"
      size="huge"
      role="dialog"
      aria-modal="true"
    >
      <template #header-extra> </template>
      <div style="margin-bottom: 12px; font-size: 14px">礼品卡1卡号：{{ row.gift_card_no_1 }}</div>
      <div style="margin-bottom: 12px; font-size: 14px"
        >礼品卡1密码c：{{ row.gift_card_pwd_1 }}</div
      >
      <div style="margin-bottom: 12px; font-size: 14px">礼品卡1余额c：{{ row.gift_account_1 }}</div>
      <div style="margin-bottom: 12px; font-size: 14px"
        >礼品卡1使用次数：{{ row.gift_card1_use_times }}</div
      >
      <div style="margin-bottom: 12px; font-size: 14px">礼品卡2卡号：{{ row.gift_card_no_2 }}</div>
      <div style="margin-bottom: 12px; font-size: 14px">礼品卡2密码：{{ row.gift_card_pwd_2 }}</div>
      <div style="margin-bottom: 12px; font-size: 14px">礼品卡2余额：{{ row.gift_account_2 }}</div>
      <div style="margin-bottom: 12px; font-size: 14px"
        >礼品卡2使用次数：{{ row.gift_card2_use_times }}</div
      >
      <div style="margin-bottom: 12px; font-size: 14px">信用卡卡号：{{ row.credit_card_no }}</div>
      <div style="margin-bottom: 12px; font-size: 14px">信用卡密码：{{ row.credit_card_cvv }}</div>
      <div style="margin-bottom: 12px; font-size: 14px">信用卡有效期：{{ row.validity }}</div>
      <div style="margin-bottom: 12px; font-size: 14px">商品名称：{{ row.product_name }}</div>
      <div style="margin-bottom: 12px; font-size: 14px">商品id：{{ row.product_id }}</div>
      <div style="margin-bottom: 12px; font-size: 14px">销售价：{{ row.sell_price }}</div>
      <div>采购价：{{ row.purchase_price }}</div>
      <template #footer> </template>
    </n-card>
  </n-modal>
</template>

<script lang="ts" setup>
  import { h, reactive, ref } from 'vue';
  import { BasicTable, TableAction } from '@/components/Table';
  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
  import { getTableList } from '@/api/table/list';
  import { columns, ListData } from './columns';
  import { useRouter } from 'vue-router';
  import { showOrderInfo } from '@/api/table/list';
  const schemas: FormSchema[] = [
    {
      field: 'date',
      component: 'NDatePicker',
      label: '根据订单提交时间查询',
      defaultValue: new Date().getTime(),
      componentProps: {
        type: 'date',
        clearable: true,
        valueFormat: 'yyyy-MM-dd',
        onUpdateValue: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'order_number',
      component: 'NInput',
      label: '根据订单编号查询',
      componentProps: {
        placeholder: '请输入订单编号',
        onInput: (e: any) => {
          console.log(e);
        },
      },
    },
  ];

  const router = useRouter();
  const actionRef = ref();
  const showModal = ref(false);
  // 吴丹绮 郭姐 吴娇杰 陈萍 吕灵娜
  const roles = ref([
    {
      name: '吴丹绮',
      value: 'wudanqi',
    },
    {
      name: '郭姐',
      value: 'guojie',
    },
    {
      name: '吴娇杰',
      value: 'wujiaojie',
    },
    {
      name: '陈萍',
      value: 'chenping',
    },
    {
      name: '吕灵娜',
      value: 'lulingna',
    },
  ]);

  const [register, { getFieldsValue }] = useForm({
    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
    labelWidth: 200,
    schemas,
  });

  const row = ref({});

  const tableColumns = columns();

  const $message = window['$message'];
  function formatDate(time) {
    var date = new Date(parseInt(time));
    var year = date.getFullYear();
    var mon = (date.getMonth() + 1 + '').padStart(2, '0');
    var day = date.getDate();
    return year + '-' + mon + '-' + day;
  }
  const loadDataTable = async (res) => {
    const params = getFieldsValue();
    if (JSON.stringify(params) == '{}') return;

    return await showOrderInfo({ ...{ ...params, date: formatDate(params.date) }, ...res });
  };

  function onCheckedRow(rowKeys) {
    console.log(rowKeys);
  }

  function reloadTable() {
    actionRef.value.reload();
  }

  function handleSubmit(values: Recordable) {
    reloadTable();
  }

  function handleReset(values: Recordable) {
    console.log(values);
  }
</script>

<style lang="less" scoped></style>
